<template>
  <div class="real-time-metrics">
    <div class="section-header">
      <h3>实时监控数据</h3>
      <div class="update-time">
        <i class="el-icon-time"></i>
        最后更新：{{ lastUpdateTime }}
      </div>
    </div>

    <!-- 实时指标卡片 -->
    <el-row :gutter="16" class="metrics-row">
      <el-col :span="6" v-for="(metric, index) in realTimeMetrics" :key="index">
        <div class="metric-card" :class="metric.status">
          <div class="metric-header">
            <div class="metric-icon" :style="{ backgroundColor: metric.color }">
              <i :class="metric.icon"></i>
            </div>
            <div class="metric-trend" v-if="metric.trend">
              <i :class="metric.trend > 0 ? 'el-icon-top trend-up' : 'el-icon-bottom trend-down'"></i>
              <span>{{ Math.abs(metric.trend) }}%</span>
            </div>
          </div>
          <div class="metric-content">
            <div class="metric-value">
              <span class="value">{{ metric.value }}</span>
              <span class="unit">{{ metric.unit }}</span>
            </div>
            <div class="metric-label">{{ metric.label }}</div>
            <div class="metric-range" v-if="metric.range">
              正常范围：{{ metric.range }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 设备状态统计 -->
    <el-row :gutter="16" class="status-row">
      <el-col :span="6" v-for="(status, index) in deviceStatusStats" :key="index">
        <div class="status-card">
          <div class="status-icon" :style="{ color: status.color }">
            <i :class="status.icon"></i>
          </div>
          <div class="status-content">
            <div class="status-count">{{ status.count }}</div>
            <div class="status-label">{{ status.label }}</div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "RealTimeMetrics",
  props: {
    realTimeMetrics: {
      type: Array,
      default: () => [
        {
          label: "实时功率",
          value: "0.00",
          unit: "kW",
          icon: "el-icon-lightning",
          color: "#409EFF",
          trend: 0,
          range: "0-100kW",
          status: "normal"
        },
        {
          label: "电压",
          value: "0.00",
          unit: "V",
          icon: "el-icon-cpu",
          color: "#67C23A",
          trend: 0,
          range: "200-240V",
          status: "normal"
        },
        {
          label: "电流",
          value: "0.00",
          unit: "A",
          icon: "el-icon-connection",
          color: "#E6A23C",
          trend: 0,
          range: "0-500A",
          status: "normal"
        },
        {
          label: "温度",
          value: "0.00",
          unit: "℃",
          icon: "el-icon-thermometer",
          color: "#F56C6C",
          trend: 0,
          range: "0-80℃",
          status: "normal"
        }
      ]
    },
    deviceStatusStats: {
      type: Array,
      default: () => [
        { label: "在线设备", count: 0, icon: "el-icon-success", color: "#67C23A" },
        { label: "离线设备", count: 0, icon: "el-icon-error", color: "#F56C6C" },
        { label: "告警设备", count: 0, icon: "el-icon-warning", color: "#E6A23C" },
        { label: "故障设备", count: 0, icon: "el-icon-close", color: "#909399" }
      ]
    },
    lastUpdateTime: {
      type: String,
      default: ''
    }
  }
};
</script>

<style lang="scss" scoped>
.real-time-metrics {
  margin-bottom: 24px;

  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;

    h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #303133;
    }

    .update-time {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 14px;
      color: #909399;

      i {
        color: #409EFF;
      }
    }
  }

  .metrics-row {
    margin-bottom: 16px;
  }

  .metric-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    }

    &.warning {
      border-left: 4px solid #E6A23C;
    }

    &.danger {
      border-left: 4px solid #F56C6C;
    }

    .metric-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;

      .metric-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 18px;
      }

      .metric-trend {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;

        .trend-up {
          color: #F56C6C;
        }

        .trend-down {
          color: #67C23A;
        }
      }
    }

    .metric-content {
      .metric-value {
        display: flex;
        align-items: baseline;
        gap: 4px;
        margin-bottom: 8px;

        .value {
          font-size: 28px;
          font-weight: 600;
          color: #303133;
        }

        .unit {
          font-size: 14px;
          color: #909399;
        }
      }

      .metric-label {
        font-size: 14px;
        color: #606266;
        margin-bottom: 4px;
      }

      .metric-range {
        font-size: 12px;
        color: #909399;
      }
    }
  }

  .status-row {
    .status-card {
      background: white;
      border-radius: 8px;
      padding: 16px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
      gap: 12px;

      .status-icon {
        font-size: 24px;
      }

      .status-content {
        .status-count {
          font-size: 24px;
          font-weight: 600;
          color: #303133;
        }

        .status-label {
          font-size: 14px;
          color: #606266;
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .metric-card {
    .metric-content {
      .metric-value {
        .value {
          font-size: 24px !important;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .metric-card {
    padding: 16px !important;

    .metric-content {
      .metric-value {
        .value {
          font-size: 20px !important;
        }
      }
    }
  }

  .status-card {
    padding: 12px !important;

    .status-content {
      .status-count {
        font-size: 18px !important;
      }
    }
  }
}
</style>
